<template>
  <div>

    <div class="tab">
      <el-button type="danger" @click="batchDelete" :disabled="btnStatus">批量删除</el-button>
      <el-table
        @selection-change="change"
        :data="tableData">
        <el-table-column
          fixed
          prop="articleId"
          label="ID"
          type="selection"
          width="150">
        </el-table-column>
        <el-table-column
          fixed
          label="标题"
          width="150">
          <template slot-scope="scope">
            <el-link type="primary" @click="routerArticleByTitle(scope.row.articleId,scope.row.articleTitle)">
              {{ scope.row.articleTitle }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="articleClassify"
          label="分类"
          width="120">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="120">
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="修改时间"
          width="120">
        </el-table-column>
        <el-table-column
          prop="articleUsername"
          label="发布人"
          width="100  ">
        </el-table-column>
        <el-table-column
          prop="articleRanking"
          label="文章排行"
          width="80">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="routerArticleById(scope.row.articleId)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[15, 25, 35, 55]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import {batchDelete, getArticleDraft, getBlogInfoByTitle} from "../../request/reqManage";

export default {
  name: "BlogDrafts",
  data() {
    return {
      tableData: [],
      //当前页
      currentPage: 1,
      //每页多少条
      pageSize: 5,
      //总共多少条数据
      total: 0,
      array: [],
      //默认按钮的状态不可用
      btnStatus: true,
    }
  },
  methods: {
    /**
     * 分页查询
     * @param val
     */
    handleSizeChange(val) {

      //
      // this.$mr.articleList(this.currentPage, val).then(({data}) => {
      //   this.tableData = data.records
      // })
    },
    /**
     * 点击标题调转到对应文章页面
     * @param val
     */
    routerArticleByTitle(id, title) {
      this.$router.push({
        path: `/blogInfoById/${id}`,
      })
    },
    /**
     * 点击编辑跳转到发布文章页面并传过去id
     * @param val
     */
    routerArticleById(val) {
      this.$router.replace({
        path: '/updateBlog',
        query: {
          articleId: val
        }
      })
    },
    /**
     * 处理修改分页的事件
     * @param val
     */
    handleCurrentChange(val) {

      //
      // this.$mr.articleList(val, this.pageSize).then(({data}) => {

      //   this.tableData = data.records
      // })

    },
    /**
     * 查询草稿箱数据并吧数据给tableData
     */
    selectDrafts() {
      this.$mr.getArticleDraft(this.$route.params.articleUsername).then((data) => {

        this.tableData = data.data
      })
    },
    /**
     * 删除方法
     * @param row
     */
    handleDelete(row) {

    },
    /**
     * 处理在未勾选文章的情况下不能点击批量删除
     * @param val
     */
    change(val) {
      this.array = []
      for (let i = 0; i < val.length; i++) {
        this.array.push(val[i].articleId)
      }

      if (val.length > 0) {
        this.btnStatus = false
      }
      if (val.length <= 0) {
        this.btnStatus = true
      }
      // if (this.array.length>0){
      //   this.btnStatus=false
      // } if (this.array.length===0){
      //   this.btnStatus=true
      // }
    },
    /**
     * 点击删除案件弹出一个友好提示框，显示删除成功或者失败
     */
    batchDelete() {
      // this.$mr.batchDelete(this.array).then(({data}) =>{
      // this.$mr.batchDelete(this.array.join(','):ids).then()
      this.$mr.batchDelete(this.array.join(',')).then(res => {

        if (res.code !== 200) {
          this.$message.error("删除失败")
          return
        }
        this.$message.success("删除成功")
        //删除之后在次查询文章内容
        this.selectDrafts()
      })

    }


  },

  /**
   * 自动加载
   */
  created() {
    // this.articleList()
    this.selectDrafts()
  }

}
</script>

<style scoped>
.tab {
  width: 65%;
  margin: auto;

}
</style>
